<template>
  <a-row :gutter="15">
    <a-col :span="24">
      <div class="list">
        <Draggable
          :list="dataList"
          group="people"
          itemKey="uuid"
          class="list"
          v-show="!disabled"
        >
          <template #item="{ element, index }">
            <div class="list-item" @click="choiceId = element.uuid">
              <div
                class="box"
                :class="element.uuid === choiceId ? 'choiceClass' : ''"
              >
                <div>
                  {{
                    getWorkSerialValueByKey(
                      'processName',
                      element.processGroupId
                    )
                  }}
                </div>
                <a-typography-text
                  type="warning"
                  v-if="!element.processGroupId"
                >
                  工序未选择
                </a-typography-text>
                <a-typography-text
                  type="danger"
                  v-else-if="
                    productionMethod === '委外' &&
                    getWorkSerialValueByKey(
                      'productionMethod',
                      element.processGroupId
                    ) !== '委外'
                  "
                >
                  外委工序组必须选择委外工序<br />
                  请重新选择
                </a-typography-text>
                <div class="add" @click.stop="add(index)">
                  <icon-plus-circle size="26" />
                </div>
                <div class="del" @click.stop v-if="dataList.length !== 1">
                  <a-popconfirm
                    content="是否删除该工序?"
                    type="error"
                    @ok="dataList.splice(index, 1)"
                  >
                    <icon-minus-circle size="26" />
                  </a-popconfirm>
                </div>
                <div class="sort">{{ index + 1 }}</div>
              </div>
              <div class="border" v-if="index !== dataList.length - 1" />
            </div>
          </template>
        </Draggable>
        <div class="list" v-show="disabled">
          <div
            v-for="(element, index) in dataList"
            :key="index"
            class="list-item"
            @click="choiceId = element.uuid"
          >
            <div
              class="box"
              :class="element.uuid === choiceId ? 'choiceClass' : ''"
            >
              <div>
                {{
                  getWorkSerialValueByKey('processName', element.processGroupId)
                }}
              </div>
              <a-typography-text type="warning" v-if="!element.processGroupId">
                工序未选择
              </a-typography-text>
              <a-typography-text
                type="danger"
                v-else-if="
                  productionMethod === '委外' &&
                  getWorkSerialValueByKey(
                    'productionMethod',
                    element.processGroupId
                  ) !== '委外'
                "
              >
                外委工序组必须选择委外工序<br />
                请重新选择
              </a-typography-text>
              <div class="sort">{{ index + 1 }}</div>
            </div>
            <div class="border" v-if="index !== dataList.length - 1" />
          </div>
        </div>
      </div>
    </a-col>
    <a-col :span="24">
      <div class="title"> 工序信息设置 </div>
    </a-col>
    <a-col :span="8">
      <a-form-item label="工序名称">
        <WorkSerialChoice
          :disabled="disabled"
          :workSerialList="workSerialList"
          :inputValue="choiceData.processName"
          @choice="workSerialChoice"
        />
      </a-form-item>
    </a-col>
    <a-col :span="8">
      <a-form-item label="工序编码">
        <a-input disabled v-model="choiceData.processCode" />
      </a-form-item>
    </a-col>
    <a-col :span="8">
      <a-form-item label="工序名称">
        <a-input disabled v-model="choiceData.processName" />
      </a-form-item>
    </a-col>
    <a-col :span="8">
      <a-form-item label="工序类别">
        <a-input disabled v-model="choiceData.processType" />
      </a-form-item>
    </a-col>
  </a-row>
</template>

<script setup lang="ts">
  import { reactive, onMounted, ref, nextTick, computed } from 'vue';
  import {
    TWorkSerialGroupSon,
    TWorkSerialGroup,
  } from '@/api/FactoryModeling/type';

  import { GetWorkSerialGroupPage } from '@/api/FactoryModeling';

  import Draggable from 'vuedraggable';
  import uniqueid from 'lodash.uniqueid';
  import { Message } from '@arco-design/web-vue';
  import WorkSerialChoice from '@/views/client-side/FactoryModeling/components/WorkSerialChoice.vue';

  const props = withDefaults(
    //参数说明
    defineProps<{
      productionMethod?: string;
      disabled?: boolean;
    }>(),
    {
      disabled: false,
    }
  );

  let dataList = ref<TWorkSerialGroupSon[]>([]);
  let choiceId = ref(0);
  let workSerialChoice = ([{ id }]: TWorkSerialGroup[]) => {
    let index = dataList.value.findIndex(({ uuid }) => choiceId.value === uuid);
    if (index !== -1) dataList.value[index].processGroupId = id;
  };

  let setList = (list?: TWorkSerialGroupSon[]) => {
    dataList.value = list
      ? list.map((item) => {
          return { ...item, uuid: uniqueid() };
        })
      : [{ uuid: uniqueid() }];
    choiceId.value = dataList.value[0].uuid;
  };

  let add = (index: number) => {
    dataList.value.splice(index + 1, 0, { uuid: uniqueid() });
  };
  let workSerialList = ref<TWorkSerialGroup[]>([]);
  let loadList = async () => {
    let res = await GetWorkSerialGroupPage({ page: 1, size: -1, type: 1 });
    workSerialList.value = res.content || [];
  };
  loadList();
  let getWorkSerialValueByKey = (key: keyof TWorkSerialGroup, id?: number) => {
    let data = workSerialList.value.find((item) => item.id === id);
    return data ? data[key] : '';
  };
  let choiceData = computed<TWorkSerialGroup>(() => {
    let processGroupId = dataList.value.find(
      ({ uuid }) => uuid === choiceId.value
    )?.processGroupId;
    return workSerialList.value.find(({ id }) => processGroupId === id) || {};
  });

  let getList = () => {
    let { productionMethod } = props;
    return dataList.value.reduce(
      (list: false | TWorkSerialGroupSon[], { processGroupId, id }, index) => {
        if (list)
          if (
            !processGroupId ||
            (productionMethod === '委外' &&
              getWorkSerialValueByKey('productionMethod', processGroupId) !==
                '委外')
          ) {
            Message.error(`第${index + 1}道工序校验失败,请补充或者添加信息`);
            list = false;
          } else {
            list.push({ sort: index + 1, processGroupId, id });
          }
        return list;
      },
      []
    );
  };
  defineExpose({ setList, getList });
</script>

<style scoped lang="less">
  .list {
    background: #f8f8f8;
    height: 300px;
    padding: 0 30px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    overflow-y: hidden;
    &-item {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      .choiceClass {
        box-shadow: 0 0 10px 10px rgb(var(--arcoblue-3));
        border: 1px solid rgb(var(--arcoblue-3));
      }

      .box:hover {
        box-shadow: 0 0 10px 10px rgb(var(--arcoblue-3));
        border: 1px solid rgb(var(--arcoblue-3));
      }
      .box {
        width: 200px;
        height: 100px;
        background: #fff;
        border: 1px solid #bebebe;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        cursor: pointer;
        .add {
          position: absolute;
          right: -13px;
          top: 37px;
          color: rgb(var(--arcoblue-5));
          height: 26px;
          width: 26px;
          background: #fff;
          border-radius: 13px;
        }
        .del {
          position: absolute;
          right: -13px;
          top: -13px;
          color: rgb(var(--red-6));
          height: 26px;
          width: 26px;
          background: #fff;
          border-radius: 13px;
        }
        .sort {
          background: rgb(var(--arcoblue-5));
          line-height: 26px;
          color: #fff;
          height: 26px;
          width: 26px;
          border-radius: 13px;
          position: absolute;
          text-align: center;
          left: -13px;
          top: -13px;
        }
      }
      .border {
        border-bottom: 1px solid #bebebe;
        width: 50px;
      }
    }
  }
  .title {
    font-size: 20px;
    margin: 20px 0;
  }
</style>
